<template>
	<div class="class-import-members">
		<div class="classIndex_h">
			<router-link :to="{path: '/class/member/index', query: {id: path}}">班级成员</router-link>
			<strong><i>></i>批量导入</strong>
		</div>
		<div class="import-file">
			<!-- <el-button type="primary" @click="download">下载模板</el-button> -->
			<a target="_blank" :href="BASE_URL + '/index/resource/user_class_import_demo'">下载模板</a>
			<uploader :options="uploadOptions" :autoStart="true" ref="uploader" :file-status-text="statusText" @files-submitted="fileSubmit" @file-removed="fileRemoved" @file-success="fileSuccess" @file-error="fileFail" class="uploader-example">
				<uploader-unsupport></uploader-unsupport>
				<uploader-btn :directory="false" :attrs="attrs" v-if="selectFileShow" :single="true">上传文件</uploader-btn>
				<uploader-list v-if="!selectFileShow"></uploader-list>
			</uploader>
		</div>
		<div class="import-txt">
			<h3>注意事项</h3>
			<p>1、格式支持：Excel2003版本以上的 xls/xlsx格式。</p>
			<p>2、Excel表数据从第二行开始有效。表中数据均为必填项，用例不需要删除。</p>
			<p>3、导入用户默认密码为666666，导入后用户可自行登录修改密码。</p>
			<p>4、角色信息仅支持学生，输入其他角色则导入无效。</p>
			<p>5、账号为4~16位英文、数字、下划线组成</p>
		</div>
		<div class="import-table">
			<p>例</p>
			<table>
				<tr>
					<th>序号</th>
					<th>账号</th>
					<th>用户名</th>
					<th>角色</th>
					<th>性别</th>
				</tr>
				<!-- 	<tr>
					<td>1</td>
					<td>lina</td>
					<td>李娜</td>
					<td>教师</td>
					<td>女</td>
				</tr> -->
				<!-- 		<tr>
					<td>2</td>
					<td>zhangwei</td>
					<td>张伟</td>
					<td>家长</td>
					<td>男</td>
				</tr> -->
				<tr>
					<td>1</td>
					<td>zhangxiaowei</td>
					<td>张小伟</td>
					<td>学生</td>
					<td>男</td>
				</tr>
				<tr>
					<td>2</td>
					<td>zhangxiaowei2</td>
					<td>张小伟2</td>
					<td>学生</td>
					<td>男</td>
				</tr>
				<tr>
					<td>3</td>
					<td>zhangxiaowei3</td>
					<td>张小伟3</td>
					<td>学生</td>
					<td>男</td>
				</tr>
			</table>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			path: this.$route.query.id,
			attrs: {
				accept: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']
			},
			uploadOptions: {
				target: this.BASE_URL + '/api/resource/res_upload',
				testChunks: false,
				headers: { Authorization: `Bearer ` + this.$g.access_token },
			},
			selectFileShow: true, //是否显示选择文件按钮
			uploadRetryTimes: 100, //文件最大重传次数
			excelUploader: null,
			selectFileOrNot: false, //是否选中文件
			uploadOrNot: false, //是否已经上传
			uploadInfo: {
				file_name: '',
				file_path: '',
				file_size: 0
			},
			statusText: {
				success: '上传成功',
				error: '上传出错',
				uploading: '正在上传...',
				paused: '暂停',
				waiting: '等待上传'
			},
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.excelUploader = this.$refs.uploader.uploader;
		})
	},
	methods: {
		download() {
			this.exportExcelGet('index/resource/user_class_import_demo')
		},
		setImport() {
			let success = (res => {

				this.$message.success(res.msg)
				this.$parent.$parent.$parent.$parent.getClassS()
			})
			let fail = (res => {
				let note = '';
				let msg = res.msg;

				if (Array.isArray(msg)) {
					msg.forEach(item => {
						note += item + '; ';
					})
				}

				this.$message.error(note)
			})
			let data = {
				class_id: this.path,
				path: this.uploadInfo.file_path
			}
			this.$ajax.post('api/org/vue_classuser_import', data, { func: { success: success, fail: fail } })
		},

		//上传成功的事件  
		fileSuccess(rootFile, file, message, chunk) {
			this.selectFileShow = true;
			var mess = eval('(' + message + ')');
			mess = handleResponseData(mess);

			if (parseInt(mess.data.status) === 1) {
				this.uploadOrNot = true;
				this.uploadInfo.file_name = mess.data.file_name;
				this.uploadInfo.file_path = mess.data.file_path;
				this.uploadInfo.post_fix = mess.data.post_fix;
				this.setImport()
			} else if (mess.status === 'fail') {
				this.$message.error(mess.msg + ' ' + file.name)
				this.$refs.uploader.uploader.cancel()
			}
			this.excelUploader.removeFile(file);
		},
		fileFail(rootFile, file, message, chunk) {

			let mess = JSON.parse(message)

			if (+mess.error === 401 && this.uploadRetryTimes > 0) {
				let callbcak = (res => {
					this.uploadRetryTimes--;
					this.excelUploader.retry(file);
				})

				this.get_access_token(callbcak);
			} else {
				this.$message.error(mess.msg);
				this.excelUploader.removeFile(file);
			}
		},
		//过滤文件格式
		fileSubmit(files, fileList, event) {
			for (var i = 0; i < fileList.length; i++) {
				if (this.excelUploader.fileList.length > 1) {
					//删除第一张图片
					this.excelUploader.removeFile(this.excelUploader.fileList[0]);
				}
				this.uploadInfo.file_size = fileList[i].size;
				this.selectFileOrNot = true;
				this.selectFileShow = false;
			}
		},
		fileRemoved(file) {
			this.selectFileOrNot = false;
			this.selectFileShow = true;
		},
		fileUpload() {
			this.excelUploader.resume();
		},
	}
}
</script>
<style lang="scss">
.class-import-members {
	.import-file {
		button, a {
			padding: 0;
			width: 80px;
			height: 36px;
			color: #fff;
			line-height: 36px;
			text-align: center;
			margin-right: 15px;
			font-size: 14px;
			border-radius: 4px;
			background-color: #338efc;
			display: inline-block;
			vertical-align: middle;

		}
		.uploader-example {
			display: inline-block;
			vertical-align: top;
		}
		.uploader-btn {
			padding: 0;
			width: 80px;
			height: 34px;
			line-height: 34px;
			text-align: center;
			color: #fff;
			background-color: #338efc;
			border-color: #338efc;
			border-radius: 4px;
			font-size: 14px;
		}
	}

	.import-txt {
		background: #FFFCE6;
		padding: 15px 25px;
		margin-top: 30px;
		color: #B59F45;

		>h3 {
			font-size: 16px;
			margin-bottom: 10px;
		}
		p {
			line-height: 24px;
		}

	}

	.import-table {
		margin-top: 20px;
		>p {
			margin-bottom: 10px;
		}
		table {
			width: 100%;
			border: 1px solid #ddd;
			tr {
				line-height: 40px;
			}
			td, th {
				color: #666;
				text-align: center;
				border: 1px solid #ddd;
			}
		}
	}
}
</style>